import { useState } from 'react'

// 函数组件
function Test1() {

  const [ userInfo, setUserInfo ] = useState({
    name: '张三',
    age: 18
  })

  const [ isLoading, setIsLoading ] = useState(true)
  setTimeout(() => {
    // 浅合并，会把对象跟之前的合并。
    setUserInfo({
      // ...userInfo,
      name: '李四'
    })
  }, 3000)

  function getStatus() {
    if (isLoading) {
      return (<div>加载中...(函数调用)</div>)
    } else {
      return (<div>已加载...(函数调用)</div>)
    }
  }

  return (
    <div className='box-container'>
      <h2>Test1文件 - 函数组件：</h2>
      {/*与setState对比*/}
      名字：{ userInfo.name }，年龄：{ userInfo.age }

      <div>
        <h2>判断</h2>
        <button onClick={ () => setIsLoading(!isLoading) }>
          { isLoading ? '显示' : '隐藏' }
        </button>
        {/*三元表达式：显示不同的组件*/ }
        { isLoading ? <div>加载中（三元表达式）</div> : <div>已加载（三元表达式）</div> }

        {/*函数调用，在函数中返回不同的组件*/ }
        <div>{ getStatus() }</div>
      </div>
    </div>
  )
}

export default Test1
